<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0043)http://www.jq22.com/demo/turnplate20160217/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no"/>
  <title>大转盘抽奖</title>
  <link type="text/css" rel="stylesheet" href="../../css/reset.css">
  <link type="text/css" rel="stylesheet" href="./css/invite.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <script src="../../js/ai.js"></script>

  <title></title>
  <link href="./autumn/rotate/style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="./autumn/rotate/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="./autumn/rotate/awardRotate.js"></script>
  <script type="text/javascript" src="./autumn/js/jquery.qrcode.min.js"></script>
  <script type="text/javascript" src="./autumn/js/ai.js"></script>
</head>
<body style="background: #d35213">
<img src="./autumn/rotate/1.png" id="shan-img" style="display:none;">
<img src="./autumn/rotate/2.png" id="sorry-img" style="display:none;">
<p class="titles">
  您还有 <span>1</span> 次抽奖机会！
</p>
<div class="banner">
  <!--<div class="turnplate" style="background-image:url('rotate/turnplate-pointer.png');background-size:100% 100%;">-->
  <div class="turnplate">
    <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
    <img class="pointer" src="./autumn/rotate/turnplate-pointer.png">
  </div>
  <!-- 弹窗 -->
  <div class="popup">
    <div class="inner">
      <div class="box">
        <p>您今天的抽奖次数已经用完啦</p>
        <a class="jump1" href="index.html">再去挑战一下</a>
        <a class="jump2" href="https://wechat.jkbanlv.com/getcode/game">去康侣论坛逛逛</a>
      </div>
    </div>
  </div>
</div>
<p class="subtitle">
  进入官方论坛，体验更多精彩内容！
</p>
<div id="qrcode" class="vrcode" style="display: none;"></div>
<div id="qrcode2" class="vrcode" style="display: none;"></div>
<div class="codes">
  <div class="box">
    <p>公众号</p>
    <!--<div id="qrImage"></div>-->
    <img src="./autumn/img/code.png">
  </div>
  <div class="box">
    <p>手机康侣</p>
    <!--<div id="qrImage2"></div>-->
    <img src="./autumn/img/code.png">
  </div>
</div>
<script type="text/javascript">
  document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 7.5 + 'px';
  function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  }

  var cishu = getQueryString('reward');
  $('.titles span').text(cishu);
  ai.ajax({
    url: '/midautumn/gameIndex',
    urlType: 'games',
    withToken: getQueryString('token'),
    origin: true,
    // parse: true,
  },function(res){
    if(res.code == 500){
      return;
    }
    cishu = res.data.luck_times;
    $('.titles span').text(cishu);
  });
  var turnplate = {
    restaraunts: [],				//大转盘奖品名称
    colors: [],					//大转盘奖品区块对应背景颜色
    outsideRadius: 192,			//大转盘外圆的半径
    textRadius: 155,				//大转盘奖品位置距离圆心的距离
    insideRadius: 68,			//大转盘内圆的半径
    startAngle: 0,				//开始角度
    bRotate: false				//false:停止;ture:旋转
  };

  $(document).ready(function () {
    //动态添加大转盘的奖品与奖品区域背景颜色
    turnplate.restaraunts = ["iPhone XS", "现金红包", "康众护眼灯", "现金红包", "森海塞尔  耳塞", "现金红包", "谢谢参与", "现金红包"];
    turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

    var rotateTimeOut = function () {
      $('#wheelcanvas').rotate({
        angle: 0,
        animateTo: 2160,
        duration: 8000,
        callback: function () {
          // alert('网络超时，请检查您的网络设置！');
          $('popup p').text('网络超时，请检查您的网络设置！');
          $('popup .jump1').hide();
          $('popup .jump2').attr('herf', 'javascript:void(0)');
          $('popup .jump2').on('click',function(){
            $('popup').hide()
          })
        }
      });
    };

    //旋转转盘 item:奖品位置; txt：提示语;
    var rotateFn = function (item, txt) {
      var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
      if (angles < 270) {
        angles = 270 - angles;
      } else {
        angles = 360 - angles + 270;
      }
      $('#wheelcanvas').stopRotate();
      $('#wheelcanvas').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function () {
          alert(txt);
          turnplate.bRotate = !turnplate.bRotate;
        }
      });
    };

    $('.pointer').click(function () {
      if (turnplate.bRotate) return;
      if (cishu == 0) return;
      console.log(cishu)
      ai.ajax({
        url: '/midautumn/luckDraw',
        urlType: 'games',
        withToken: getQueryString('token'),
        origin: true,
        // parse: true,
      },function(res){
        // 减次数
        var popup = $('.popup');
        if(res.code == 500) {
          popup.find('p').text('奖励次数已经用完啦~');
          popup.find('.jump1').attr('href','index.html?token='+getQueryString('token'));
          popup.show();
          return;
        }else{
          cishu--;
          console.log(res);
        }
        /*$('.titles span').text(res.data.luck_times);
        var item = 0;
        var text = '';
        // iphone 是 1
        if(res.data.type == 5 || res.data.type == 4) {
          // 红包
          item = Math.round(Math.random() * 3) * 2
          text = '现金红包';
        }else if(res.data.type == 1){
          item = 1
          text = 'iPhone XS';
        }else if(res.data.type == 2){
          item = 3
          text = '康众护眼灯';
        }else if(res.data.type == 3){
          item = 5
          text = '森海塞尔 耳塞';
        }else{
          item = 7
          text = '谢谢参与';
        }
        turnplate.bRotate = !turnplate.bRotate;
        //获取随机数(奖品个数范围内)
        // var item = rnd(1, turnplate.restaraunts.length);
        //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
        console.log(res);

        rotateFn(item, text);*/
        // console.log(item);
      });
      /* switch (item) {
        case 1:
          rotateFn(252, turnplate.restaraunts[0]);
          break;
        case 2:
          rotateFn(216, turnplate.restaraunts[1]);
          break;
        case 3:
          rotateFn(180, turnplate.restaraunts[2]);
          break;
        case 4:
          rotateFn(144, turnplate.restaraunts[3]);
          break;
        case 5:
          rotateFn(108, turnplate.restaraunts[4]);
          break;
        case 6:
          rotateFn(72, turnplate.restaraunts[5]);
          break;
        case 7:
          rotateFn(36, turnplate.restaraunts[6]);
          break;
        case 8:
          rotateFn(360, turnplate.restaraunts[7]);
          break;
        case 9:
          rotateFn(324, turnplate.restaraunts[8]);
          break;
        case 10:
          rotateFn(288, turnplate.restaraunts[9]);
          break;
      } */
    });
  });

  function rnd(n, m) {
    var random = Math.floor(Math.random() * (m - n + 1) + n);
    return random;
  }

  //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
  window.onload = function () {
    drawRouletteWheel();
  };

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      //根据奖品个数计算圆周角度
      var arc = Math.PI / (turnplate.restaraunts.length / 2);
      var ctx = canvas.getContext("2d");
      //在给定矩形内清空一个矩形
      ctx.clearRect(0, 0, 422, 422);
      //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
      ctx.strokeStyle = "#FFBE04";
      //font 属性设置或返回画布上文本内容的当前字体属性
      ctx.font = '16px Microsoft YaHei';
      for (var i = 0; i < turnplate.restaraunts.length; i++) {
        var angle = turnplate.startAngle + i * arc;
        ctx.fillStyle = turnplate.colors[i];
        ctx.beginPath();
        //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
        ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
        ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
        //锁画布(为了保存之前的画布状态)
        ctx.save();

        //----绘制奖品开始----
        ctx.fillStyle = "#E5302F";
        var text = turnplate.restaraunts[i];
        var line_height = 17;
        //translate方法重新映射画布上的 (0,0) 位置
        ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

        //rotate方法旋转当前的绘图
        ctx.rotate(angle + arc / 2 + Math.PI / 2);

        /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
        if (text.indexOf("M") > 0) {//流量包
          var texts = text.split("M");
          for (var j = 0; j < texts.length; j++) {
            ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
            if (j == 0) {
              ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
            } else {
              ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
            }
          }
        } else if (text.indexOf("M") == -1 && text.length > 6) {//奖品名称长度超过一定范围
          text = text.substring(0, 6) + "||" + text.substring(6);
          var texts = text.split("||");
          for (var j = 0; j < texts.length; j++) {
            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
          }
        } else {
          //在画布上绘制填色的文本。文本的默认颜色是黑色
          //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
          ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        }

        //添加对应图标
        if (text.indexOf("闪币") > 0) {
          var img = document.getElementById("shan-img");
          img.onload = function () {
            ctx.drawImage(img, -15, 10);
          };
          ctx.drawImage(img, -15, 10);
        } else if (text.indexOf("谢谢参与") >= 0) {
          var img = document.getElementById("sorry-img");
          img.onload = function () {
            ctx.drawImage(img, -15, 10);
          };
          ctx.drawImage(img, -15, 10);
        }
        //把当前画布返回（调整）到上一个save()状态之前
        ctx.restore();
        //----绘制奖品结束----
      }
    }
  }

</script>
<script type="text/javascript">
  var wh = 2 * (window.innerWidth / 7.5)
  /*jQuery('#qrcode').qrcode({
    render: "canvas",
    width: wh,
    height: wh,
    foreground: "#000000",
    background: "#FFFFFF",
    text: ai.url(),
  });
  var canvasDom = document.getElementsByTagName('canvas')[1];
  //将转换后的img标签插入到html中
  var img = ai.convertImage(canvasDom)
  $('#qrImage').append(img);
  jQuery('#qrcode2').qrcode({
    render: "canvas",
    width: wh,
    height: wh,
    foreground: "#000000",
    background: "#FFFFFF",
    text: ai.url(),
  });
  var canvasDom = document.getElementsByTagName('canvas')[2];
  //将转换后的img标签插入到html中
  var img = ai.convertImage(canvasDom)
  $('#qrImage2').append(img);*/
</script>
</body>
</html>